<template>
	<view>
		<view class="table">
			
			<uv-search placeholder="请输入搜索单车编号" v-model="keyword"></uv-search>
			
			<table id="table-1">
				<tr>
					<th>订单号 </th>
					<th>用户ID </th>
					<th>单车编号 </th>
					<th>起始时间 </th>
					<th>起始位置 </th>
					<th>结束时间 </th>
					<th>结束位置 </th>
					<th>骑行距离(km) </th>
					<th>骑行时长(h) </th>
				</tr>
				<tr v-for="data in recordsData" :key="data.id">
					<td>{{ data.recordId }}</td>
					<td>{{ data.userId }}</td>
					<td>{{ data.bikeId }}</td>
					<td>{{ data.startTime }}</td>
					<td>({{ data.startLatitude }},{{ data.startLongitude }})</td>
					<td>{{ data.endTime }}</td>
					<td>({{ data.endLatitude }},{{ data.endLongitude }})</td>
					<td>{{ data.distance }}</td>
					<td>{{ data.duration }}</td>
				</tr>
			</table>
			<uni-pagination :current="current" :total="total" title="标题文字" :show-icon="true" @change="changePage" />
			<view class="btn-view">
				<view>
					<text class="example-info"
						style="white-space: nowrap;">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ pageSize }}</text>
				</view>
				<view class="btn-flex">
					<button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20"
						:hover-stay-time="70" @click="add"><text class="word-btn-white">增加10条数据</text></button>
					<button class="button" type="default" @click="reset">重置数据</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				apiUrl: '',
				setToken: function() {},
				recordsData: [],
				/* 分页 */
				current: 1,
				total: 10,
				pageSize: 10,
			}
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
			// this.user = getApp().globalData.user;全局变量不稳定，刷新就没了
			this.user = uni.getStorageSync('user');
			// setToken是设置header放入token的函数
			this.setToken = getApp().globalData.setToken;
			console.log(this.user);
			console.log(this.setToken);
			if (this.user == '' || this.setToken == null) {
				this.getUserTokenFail();
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				}, 1000);
			} else {
				this.getAllRecords();
			}
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getUserTokenFail() {
				this.$refs.notify.error('获取信息错误，请重新登录！');
			},
			getAllRecords() {
				const backendURL = this.apiUrl + "/record/list" + "?pageNum=" + this.current + "&pageSize=" + this
					.pageSize;
				console.log(backendURL);
				let header = this.setToken();
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'POST',
					dataType: 'json',
					header: {
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						console.log(res.data);
						this.recordsData = res.data.data.rows;
						this.total = res.data.data.total;
						
					},
					fail: function(res) {
						console.log('错误', res);
					}
				});
			},
			/* 分页工具 */
			add() {
				this.pageSize += 10;
				this.getRecords();
			},
			reset() {
				this.pageSize = 10;
				this.current = 1;
				this.getRecords();
			},
			changePage(e) {
				console.log(e);
				this.current = e.current;
				this.getRecords();
			},
		}
	}
</script>

<style>
	.table {

		/* 将容器内的元素横向排列 */
		width: 100%;
		overflow-x: auto;
		justify-content: center;
		margin: 20px;
	}

	/* Border styles */
	#table-1 thead,
	#table-1 tr {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #a8bfde;
		white-space: nowrap;
	}

	#table-1 {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #a8bfde;
	}

	/* Padding and font style */
	#table-1 td,
	#table-1 th {
		padding: 10px 0px;
		font-size: 16px;
		font-family: Verdana;
		color: #5b7da3;
		white-space: pre-wrap;
	}

	/* Alternating background colors */
	#table-1 tr:nth-child(even) {
		background: #d3dfed
	}

	#table-1 tr:nth-child(odd) {
		background: #FFF
	}
	/* 分页 */
	.btn-view {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px;
		text-align: center;
		background-color: #fff;
		justify-content: center;
		align-items: center;
	}
	
	.btn-flex {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.button {
		margin: 20px;
		width: 150px;
		font-size: 14px;
		color: #333;
	}
</style>